<template>
  <de-container class="pa-5">
    <avue-crud
      ref="crud"
      v-model="form"
      :defaults.sync="defaults"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :before-open="beforeOpen"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onSearchReset"
      @row-save="onRowSave"
      @row-update="onRowUpdate"
      @row-del="onRowDelete"
      @refresh-change="onRefresh"
      @selection-change="onSelectionChange"
      @filter-change="onFilterChange"
      @sort-change="onSortChange"
    >
      <template slot="menuName" slot-scope="{ row }">
        <span>
          <i :class="row.icon"></i>
          <span class="ml-1">{{ row.menuName }}</span>
        </span>
      </template>
      <template slot="menu" slot-scope="{ size, row, index }">
        <el-button type="text" icon="el-icon-edit" :size="size" @click="$refs.crud.rowEdit(row, index)">
          编辑
        </el-button>
        <el-button v-if="!row.type" type="text" icon="el-icon-plus" :size="size" @click="onAddSubClick(row, index)">
          新增下级
        </el-button>
        <el-button
          v-if="!row.children || row.children.length <= 0"
          type="text"
          icon="el-icon-delete"
          :size="size"
          @click="onRowDelete(row)"
        >
          删除
        </el-button>
      </template>
      <template slot="iconForm">
        <IconFontSelect v-model="form.icon" />
      </template>
    </avue-crud>
  </de-container>
</template>

<script>
import _ from 'lodash'
import DeContainer from '@/components/dataease/DeContainer'
import { requestMenuTree, addMenu, editMenu, delMenu } from '@/api/system/menu'
import ListMixin from '@/utils/mixins/list-mixin'
import IconFontSelect from '@/components/iconfont-select'
export default {
  name: 'MenuList',
  components: { DeContainer, IconFontSelect },
  mixins: [ListMixin],
  data() {
    return {
      listApi: requestMenuTree,
      createApi: addMenu,
      updateApi: editMenu,
      deleteApi: delMenu,
      editMapFunc: (item) => {
        const ret = item
        return ret
      },
      tableOption: {
        selection: false,
        stripe: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        menuWidth: 200,
        menuAlign: 'center',
        addTitle: '新增菜单',
        editTitle: '编辑菜单',
        viewTitle: '查看菜单',
        addBtn: true,
        column: [
          {
            label: '菜单名称',
            prop: 'title',
            maxlength: 24,
            showWordLimit: true,
            rules: [{ required: true, message: '请输入菜单名称' }],
            span: 12,
            slot: true,
            align: 'left',
            overHidden: true,
          },
          {
            label: '菜单编码',
            prop: 'name',
            maxlength: 24,
            showWordLimit: true,
            rules: [{ required: true, message: '请输入菜单编码' }],
            span: 12,
            slot: true,
            align: 'left',
            overHidden: true,
          },
          {
            label: '菜单图标',
            prop: 'icon',
            maxlength: 40,
            showWordLimit: true,
            rules: [{ max: 40, message: '最多40个字' }],
            span: 12,
            hide: true,
            showColumn: false,
          },
          {
            label: '排序',
            prop: 'menuSort',
            type: 'number',
            min: 0,
            max: 2147483647,
            rules: [{ required: true, message: '请输入排序' }],
            span: 12,
            hide: true,
            showColumn: false,
          },
          {
            label: '上级菜单',
            prop: 'pid',
            type: 'tree',
            props: {
              label: 'title',
              value: 'id',
              children: 'children',
            },
            dicUrl: '/api/menu/tree',
            dicMethod: 'post',
            dicQuery: {},
            rules: [{ required: true, message: '请选择上级菜单' }],
            addDisabled: false,
            display: false,
            span: 12,
            hide: true,
            showColumn: false,
          },
          {
            label: '菜单类型',
            prop: 'type',
            type: 'switch',
            value: 1,
            dicData: [
              {
                label: '菜单',
                value: 1,
              },
              {
                label: '目录',
                value: 0,
              },
            ],
            span: 12,
            align: 'center',
            overHidden: true,
          },
          {
            label: '菜单显隐',
            prop: 'hidden',
            type: 'switch',
            value: false,
            dicData: [
              {
                label: '隐藏',
                value: true,
              },
              {
                label: '显示',
                value: false,
              },
            ],
            span: 12,
            align: 'center',
            overHidden: true,
          },
          {
            label: '菜单路由',
            prop: 'path',
            rules: [{ required: true, message: '请输入菜单路由' }],
            span: 12,
            align: 'left',
            overHidden: true,
          },
          {
            label: '组件',
            prop: 'component',
            rules: [{ required: true, message: '请输入组件' }],
            span: 12,
            align: 'left',
            overHidden: true,
            hide: true,
          },
          {
            label: '权限标识',
            prop: 'permission',
            rules: [
              { required: true, message: '请输入权限标识' },
              { pattern: /^[a-z][a-z-:]*[a-z]+$/, message: '权限标识格式不正确' },
            ],
            span: 12,
            align: 'left',
            overHidden: true,
          },
        ],
      },
      defaults: {},
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // const column = this.findObject(this.tableOption.column, 'appId')
      // column.addDisabled = !!this.appId
      // this.form.appId = this.appId
      // this.searchForm.appId = this.appId ? this.appId : undefined
    },
    async beforeOpen(done, type) {
      if (type === 'add') {
        if (!this.form.pid) {
          this.form.pid = 0
          this.defaults.pid.addDisabled = true
          this.defaults.pid.display = false
        } else {
          this.defaults.pid.addDisabled = false
          this.defaults.pid.display = true
        }
        this.form.path = this.form.path || '/'
        this.form.menuSort = this.form.menuSort || 0
      } else if (type === 'edit' || type === 'view') {
        this.defaults.pid.addDisabled = false
        if (!this.form.pid) {
          this.defaults.pid.display = false
        } else {
          this.defaults.pid.display = true
        }
      }
      done()
    },
    onAddSubClick(row) {
      this.form.pid = row.id
      this.form.path = row.path

      // 设置菜单顺序
      const max = _.max((row.children || []).map((item) => item.menuSort))
      this.form.menuSort = (max || 0) + 1

      this.$refs.crud.rowAdd()
    },
  },
}
</script>

<style lang="scss"></style>
